<template>
  <div class="flex dark:dark:bg-gray-900 flex-col gap-6 p-4">
    <div
      v-for="item in useCardListStore.MbData"
      :key="item.id"
      class="relative dark:bg-gray-900 rounded-lg shadow-md overflow-hidden"
    >
      <!-- 图片区域 -->
      <div class="relative w-full h-32">
        <img
          :src="item.cover"
          :alt="item.title"
          class="object-cover w-full h-full"
        />
        <!-- 按钮组 -->
        <div class="absolute top-2 right-2 flex flex-col space-y-2">
          <My-button
            class="bg-zinc-400 absolute top-0 right-0 like_button"
            type="primary"
            icon="heart"
            iconColor="#ffffff"
          >
          </My-button>
          <My-button
            class="absolute top-2 right-0"
            type="primary"
            icon="search"
            iconColor="#ffffff"
          />
          <My-button
            type="primary"
            class="bg-zinc-400 absolute top-6 right-0"
            icon="share"
            iconColor="#ffffff"
          />
          <My-button
            type="primary"
            icon="download"
            class="absolute top-10 right-0"
            iconColor="#ffffff"
          />
        </div>
      </div>

      <!-- 信息区域 -->
      <div class="p-4 cursor-pointer">
        <!-- 标题 -->
        <p
          @click="goDetail(item.id, $event)"
          class="text-lg font-semibold text-gray-900 dark:text-gray-20"
        >
          {{ item.title }}
        </p>
        <!-- 描述 -->
        <p class="text-sm text-gray-700 dark:text-gray-400 mt-2">xxx</p>

        <!-- 用户名和发布日期 -->
        <div class="flex justify-between items-center mt-3">
          <span class="text-sm text-gray-400 dark:text-gray-400">xxx</span>
          <span class="text-xs text-gray-500 dark:text-gray-400">
            {{ item.createdAt }}
          </span>
        </div>
      </div>
    </div>
  </div>
  <My-pagination
    :page="currentPage"
    :totalPages="totalPages"
    @page-changed="handlePageChange"
  />
  <My-backTop></My-backTop>
</template>

<script>
import { ref, onMounted, watch } from 'vue'
import { useRouter } from 'vue-router'
import { useWindowSize } from '@vueuse/core'
import {
  getArticleTotalRequest,
  getArticleRequest
} from '@/api/public/index.js'
import cardListStore from '@/store/CardList/index.js'
//监听页面拖拽事件
const { width, height } = useWindowSize()
watch(width, (newVal) => {
  if (newVal > 768) {
    window.location.reload()
  }
})
export default {
  name: 'Mbdetails',
  setup() {
    const useCardListStore = cardListStore()
    const currentPage = ref(1) // 当前页码
    const totalPages = ref(0) // 总页数
    const router = useRouter()
    // 从 localStorage 获取保存的页码，默认是第一页
    const savedPage = Number(window.localStorage.getItem('currentPage')) || 1
    // 获取并渲染数据
    const loadData = (page) => {
      currentPage.value = page
      window.localStorage.setItem('currentPage', page) // 保存当前页码
      getArticleRequest(page, 10).then((res) => {
        useCardListStore.MbData.push(...res.data)
      })
    }

    // 获取总页数
    const initTotalPages = () => {
      getArticleTotalRequest().then((res) => {
        totalPages.value = Math.ceil(res.data.total / 10)
      })
    }

    // 切换页码
    const handlePageChange = (page) => {
      loadData(page)
    }

    // 跳转到详情页
    const goDetail = (id) => {
      const scrollX = window.scrollX
      const scrollY = window.scrollY
      const result = useCardListStore.MbData.find(
        (item) => item.id === Number(id)
      )
      window.localStorage.setItem('currentArticle', JSON.stringify(result))
      router.push(`/home/${id}`)
    }

    // 初始化数据
    onMounted(() => {
      loadData(savedPage) // 页面加载时使用保存的页码加载数据
      initTotalPages()
    })

    // 监听页码变化，更新 localStorage
    watch(currentPage, (newPage) => {
      window.localStorage.setItem('currentPage', newPage) // 保证每次修改页码时保存到 localStorage
    })

    return {
      currentPage,
      totalPages,
      loadData,
      handlePageChange,
      goDetail,
      useCardListStore
    }
  }
}
</script>
